<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<title>Document</title>
	<link href="//cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet">
	<script>
        (function(){
        	setRem();
        	window.addEventListener('orientation' in window?"deviceorientation":"resize",setRem);
        	function setRem(){
	        	var html = document.documentElement;
	            var hWidth = html.getBoundingClientRect().width;
	            html.style.fontSize = hWidth/15+'px';
        	}   
        })()
    </script>
    
	<style>
		* {margin: 0;padding: 0; -webkit-tap-highlight-color: transparent; -webkit-box-sizing: border-box;box-sizing: border-box;}
        body,html{width:100%;overflow: auto;background: #efefef;color: #333;}
        img{border:none;vertical-align: middle;}
        body {font-size: 14px;font-family: "MicroSoft YaHei", sans-serif;color: #333;}
        a {color: #333;text-decoration: none;}
        input {border: none;outline: none; -webkit-appearance: none;}
        ul,ol {list-style: none;}
        header{width: 100%;height: 1.7rem;border:1px solid #bfbfbf;border-width: 0 0 1px 0;background-size: 100% 44px;background-color: #fff;clear: both;overflow: hidden;}
        header .back{float:left;width: 10%;height:100%;display: block;}
        header .back span{display: block;width: 60%;height: 60%;background: url(https://st.360buyimg.com/common/commonH_B/images/2015/jd-sprites.png?v=12) no-repeat;-webkit-background-size: 10rem 9rem;margin:.3rem .3rem;
        background-size: 10rem 10rem;background-position: -1.2rem 0;}
        header .menu{float:right;width: 10%;height:100%;}
        header .menu span{display: block;width: 63%; height: 63%;background: url(http://www.qbys.cn/skin/default/mobile/images/personal.png) no-repeat;margin: .3rem .3rem;-webkit-background-size: 100% 100%;
        background-size: 90% 90%;}
		header h2{text-align: center;line-height: 1.7rem;margin:0 auto;font-size:.7rem;}
		#liveimg{width: 100%;height: 9rem;}
		#liveimg img{width: 100%;height: 100%;}
		#like{width: 100%;height: 2rem;line-height: 1rem;}
		#like img{width: 100%;height: }
		section{width: 100%;overflow: hidden;position: relative;}
		section ul{width: 100%;}
		section ul li{height: 10rem;width: 100%;margin-bottom: .1rem;clear: both;padding: .1rem 0rem 0 .2rem;}
		section ul li a{float: left;display: block;width:7rem;margin-right: .4rem;}
		section ul li a:nth-child(even){margin-right:none;}
		section ul li .lr{float: right;}
		section ul li a img{width: 7rem;}
		section ul li a .title{margin-top:.1rem;display:block;font-size:.4rem;overflow:hidden;white-space:overflow;text-overflow:ellipsis;height: 1.5rem;width: 100%;}
		section ul li a .buttom-box{width: 100%;height: 1rem;margin-top:.3rem;clear: both;line-height: 1rem;}
		section ul li a .nowprice{font-size: .7rem;display: block;float: left;}
		section ul li a .oldprice{font-size: .5rem;display: block;float: left;margin-left: .2rem;color: #666;}
		section ul li a .buy{font-size: .5rem;display: block;float: right;margin-right: .1rem;height: 100%;width: 2rem;background-color: red;color: #fff;text-align: center;}
		#gotop{width: 2rem;height: 2rem;border-radius: 50%;border: 1px solid #eee;background-color:rgba(0,0,0,0.3);position: fixed;right: .7rem;bottom: 4rem;display: none;}
		#gotop span{display: block;background:url()no-repeat; width: 80%;height: 80%;-webkit-background-size: 70%;
		background-size: 70%;margin:.4rem .4rem;}
		footer{width: 100%;height: 1rem;margin-top:1rem;}
		footer p{font-size: .5rem;color: #666;text-align: center;line-height: 1rem;}
	</style>
	
</head>
<body>
	<header>
		<a class="back" href="http://www.qbys.cn/mobile/index.php?moduleid=16&action=cate">
			<span></span>
		</a>
		<a class="menu" href="http://www.qbys.cn/mobile/index.php?moduleid=2&action=login">
			<span></span>
		</a>
		<h2>潮流服饰</h2>
	</header>
	<div class="swiper-container" id="liveimg">
      	<div class="swiper-wrapper">
	        <div class="swiper-slide"><a href="###"><img src="https://m.360buyimg.com/babel/s1237x792_jfs/t3250/257/8511659411/138901/1cf2cdea/58c6049aN3e9c8254.jpg!q50.jpg.webp"></a></div>
	        <div class="swiper-slide"><a href="###"><img src="https://m.360buyimg.com/babel/s1237x792_jfs/t4264/15/1471167618/202264/d0806e08/58c2514bNc2c8fc41.jpg!q50.jpg.webp"></a></div>
	        <div class="swiper-slide"><a href="###"><img src="https://m.360buyimg.com/babel/s1237x792_jfs/t4192/113/1855536039/150751/23b0f2e9/58c7935aNa6cd2a5e.jpg!q50.jpg.webp"></a></div>
      	</div>
      	<div class="swiper-pagination"></div>
    </div>
	<!-- <div id="liveimg">
		<img src="https://m.360buyimg.com/babel/s1237x792_jfs/t3250/257/8511659411/138901/1cf2cdea/58c6049aN3e9c8254.jpg!q50.jpg.webp">
	</div> -->
	<p id="like"><img src="https://m.360buyimg.com/babel/jfs/t3244/153/5257439608/11595/999c893/586dde35N8d87da75.jpg!q50.jpg.webp"></p>
	<section>
		<ul id="list">
			<li>
				<a href="###" class="ll">
					<img src="https://m.360buyimg.com/babel/s579x579_jfs/t3259/7/5252565556/112147/a6b00de2/5866110fNf1c3cd81.jpg!q50.jpg.webp">
					<span class="title">曼娅奴商场同款2017春装新款时尚针织衫MH1KW211 白色 160/84A/M</span>
					<div class="buttom-box">
						<span class="nowprice">￥949</span>
						<span><del class="oldprice">￥1950</del></span>
						<span class="buy">去购买</span>
					</div>
				</a>
				<a href="###" class="lr">
					<img src="https://m.360buyimg.com/babel/s579x579_jfs/t3259/7/5252565556/112147/a6b00de2/5866110fNf1c3cd81.jpg!q50.jpg.webp">
					<span class="title">曼娅奴商场同款2017春装新款时尚针织衫MH1KW211 白色 160/84A/M</span>
					<div class="buttom-box">
						<span class="nowprice">￥949</span>
						<span><del class="oldprice">￥1950</del></span>
						<span class="buy">去购买</span>
					</div>
				</a>
			</li>

			<li>
				<a href="###" class="ll">
					<img src="https://m.360buyimg.com/babel/s579x579_jfs/t3259/7/5252565556/112147/a6b00de2/5866110fNf1c3cd81.jpg!q50.jpg.webp">
					<span class="title">曼娅奴商场同款2017春装新款时尚针织衫MH1KW211 白色 160/84A/M</span>
					<div class="buttom-box">
						<span class="nowprice">￥949</span>
						<span><del class="oldprice">￥1950</del></span>
						<span class="buy">去购买</span>
					</div>
				</a>
				<a href="###" class="lr">
					<img src="https://m.360buyimg.com/babel/s579x579_jfs/t3259/7/5252565556/112147/a6b00de2/5866110fNf1c3cd81.jpg!q50.jpg.webp">
					<span class="title">曼娅奴商场同款2017春装新款时尚针织衫MH1KW211 白色 160/84A/M</span>
					<div class="buttom-box">
						<span class="nowprice">￥949</span>
						<span><del class="oldprice">￥1950</del></span>
						<span class="buy">去购买</span>
					</div>
				</a>
			</li><li>
				<a href="###" class="ll">
					<img src="https://m.360buyimg.com/babel/s579x579_jfs/t3259/7/5252565556/112147/a6b00de2/5866110fNf1c3cd81.jpg!q50.jpg.webp">
					<span class="title">曼娅奴商场同款2017春装新款时尚针织衫MH1KW211 白色 160/84A/M</span>
					<div class="buttom-box">
						<span class="nowprice">￥949</span>
						<span><del class="oldprice">￥1950</del></span>
						<span class="buy">去购买</span>
					</div>
				</a>
				<a href="###" class="lr">
					<img src="https://m.360buyimg.com/babel/s579x579_jfs/t3259/7/5252565556/112147/a6b00de2/5866110fNf1c3cd81.jpg!q50.jpg.webp">
					<span class="title">曼娅奴商场同款2017春装新款时尚针织衫MH1KW211 白色 160/84A/M</span>
					<div class="buttom-box">
						<span class="nowprice">￥949</span>
						<span><del class="oldprice">￥1950</del></span>
						<span class="buy">去购买</span>
					</div>
				</a>
			</li><li>
				<a href="###" class="ll">
					<img src="https://m.360buyimg.com/babel/s579x579_jfs/t3259/7/5252565556/112147/a6b00de2/5866110fNf1c3cd81.jpg!q50.jpg.webp">
					<span class="title">曼娅奴商场同款2017春装新款时尚针织衫MH1KW211 白色 160/84A/M</span>
					<div class="buttom-box">
						<span class="nowprice">￥949</span>
						<span><del class="oldprice">￥1950</del></span>
						<span class="buy">去购买</span>
					</div>
				</a>
				<a href="###" class="lr">
					<img src="https://m.360buyimg.com/babel/s579x579_jfs/t3259/7/5252565556/112147/a6b00de2/5866110fNf1c3cd81.jpg!q50.jpg.webp">
					<span class="title">曼娅奴商场同款2017春装新款时尚针织衫MH1KW211 白色 160/84A/M</span>
					<div class="buttom-box">
						<span class="nowprice">￥949</span>
						<span><del class="oldprice">￥1950</del></span>
						<span class="buy">去购买</span>
					</div>
				</a>
			</li>
		</ul>
		<ul id="container"></ul>
		<div id="gotop">
			<span></span>
		</div>
	</section>
	<footer>
		<p>上滑加载更多</p>

	</footer>
	<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <script> 
		var mySwiper = new Swiper('.swiper-container', {
		    autoplay: 4000,//SWIPER轮播时间控制
		    autoplayDisableOnInteraction : false,
		    pagination : '.swiper-pagination',
		})
	</script>
    <script>
    	$(function(){	

			$(window).bind('scroll',getScrollHeight);

			function getScrollHeight(){		

				if($(window).scrollTop() >= 130){

					$('#gotop').fadeIn(300); 

				}else{    

					$('#gotop').fadeOut(300);    

				}  

			}

			$('#gotop').on('touchend',function(ev){

				$('html,body').animate({scrollTop: '0px'}, 300);

				ev.preventDefault();
			});

		});//返回顶部功能
    </script>
     <script>
        $(window).bind('scroll',function(){

        	 if ($(document).scrollTop() >= $(document).height() - $(window).height()){

        	 	loadingmore();

        	 }
        });

        function loadingmore(){

           
            $.getJSON('1.json',function(data) {
              
                if(data){

                    var htm = "";
                    
                    $.each(data,function (index, val) {

                    	var oLinkL="",
                    	oldprice,
                    	oLinkR= "";

                    	oldprice = val.price * 1.3;

                    	if (index%2==0) {
                    			
                    		oLinkL = "<li><a href="+val.item+" class='ll'><img src="+val.imgurl+"><span class='title'>"+val.title+"</span><div class='buttom-box'><span class='nowprice'>￥"+val.price+"</span><span><del class='oldprice'>￥"+oldprice+"</del></span><span class='buy'>去购买</span></div></a>"
                    		}

                    	if (index%2==1)	{
                    			
                    		oLinkR = "<a href="+val.item+" class='lr'><img src="+val.imgurl+"><span class='title'>"+val.title+"</span><div class='buttom-box'><span class='nowprice'>￥"+val.price+"</span><span><del class='oldprice'>￥"+oldprice+"</del></span><span class='buy'>去购买</span></div></a></li>"
                    		}  
                    	htm += oLinkL + oLinkR;

                    	if(index == data.length-1){

                    		$("footer p").text('没有更多产品了');

                    	}

                    })
                   

                    $('#container').html(htm);

                }else{

                    $("footer p").text('没有更多产品了');
                }
            });
        }

       
    </script>
</body>
</html>